<template>
  <div class="detail_container">
    <form>
      <div class="section">
        <div class="row">
          <input name="consignee" placeholder="姓名">
        </div>
        <div class="row row-1">
          <input name="phone" placeholder="手机号码">
        </div>
        <div class="row row-0">
          <input placeholder="选择市区" @click="showPopup" v-model="selectedOption">
          <van-popup
            v-model:show="show"
            position="bottom"
            :style="{ height: '50%' }"
          >
          <van-area title="标题" :area-list="areaList" @confirm="HandleConfirm" />
          </van-popup>

        </div>
        <div class="row row-1" >
          <input name="consignee" placeholder="详细地址, 如街道、楼盘号等">
        </div>

      </div>
    </form>
    <div class="bottom">
      <div class="cancel">取消</div>
      <div class="save">保存</div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { areaList } from '@vant/area-data';
import { ref } from 'vue'
const show = ref(false);
const selectedOption = ref("")
const showPopup = () => {
  show.value = true;
};

const HandleConfirm = (selectedValues: any, selectedOptions: any) => {
  console.log(selectedValues);
  selectedOption.value = selectedValues.selectedOptions[0].text + "-" + selectedValues.selectedOptions[1].text + "-" + selectedValues.selectedOptions[2].text
  console.log(selectedOptions.value);
  
}
</script>

<style lang="less" scoped>
body {
  width: 100%;
  height: 100%;
}
.detail_container {
  width: 100%;
  min-height: 667px;
  background-color: #eee;
  .section {
    height: 213px;
    background-color: #fff;
    padding-left: 15px;
    .row {
      height: 48px;
      line-height: 48px;
      border-bottom: .3px solid #999;
      input {
        width: 360px;
        height: 17px;
        border: none;
        font-size: 14px;
      }
    }

    .row-0 {
      height: 52px;
    }
    .row-1 {
      height: 56px;
      line-height: 56px;
    }
  }
  .bottom {
    position: fixed;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 14px;

    .cancel {
      width: 50%;
      text-align: center;
      color: #333;
      background-color: #fff;
    }

    .save {
      width: 50%;
      text-align: center;
      color: #fff;
      background-color: #DD1A21;
    }
  }
}

</style>